<template>
  <div class="outer">
    <h1>我是Count</h1>
    <!-- <p>{{this.$store.state.count}}</p>
    <p>苹果11的价格是:{{this.$store.state.price}}</p> -->
    <p>count:{{count}} <br>电影的数量是：{{movieList.length}} </p>
    <p>苹果11的价格是:{{price}}</p>
    <button @click="increatmentN({n:5})">count每次加5</button>
    <button @click="decreatmentN({n:4})">每次减4</button>
    <button @click='decreatmentNWait({n:3})'>等等再减3</button>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
    name:'Count',
    computed:{
      // count(){
      //   return this.$store.state.count
      // },
      // price(){
      //   return this.$store.state.price
      // }

      //映射写法-对象：
     ...mapState({count:'count',price:'price',movieList:'movieList'})
    },
    methods:{
      // increatmentNHandle(){
      //   // this.$store.commit('increatmentN',{n,m,c})
      // }
        ...mapMutations(['increatmentN','decreatmentN','setMovieList']),
        ...mapActions(['decreatmentNWait'])
      
    }
}
</script>

<style scoped>
  .outer {
    width: 900px;
   
    margin: 0 auto;
    background-color: yellowgreen;
  }
</style>